<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script src="./jquery-2.1.4/jquery.js"></script>
<title>注册页面</title>
<style type="text/css">
#div {
	background-color: aliceblue
}

#two {
	margin: 40px;
}

#a {
	margin-left: 95%;
}
</style>
<script>
	function Test() {
		var name = document.getElementById("name").value;
		var id = document.getElementById("id").value;
		var card = document.getElementById("card").value;
		var pwd = document.getElementById("pwd").value;
		var pwd1 = document.getElementById("pwd1").value;
		if (name.length == 0) {
			alert("姓名不能为空！");
			return;
		}
		if (id.length == 0) {
			alert("账号不能为空！");
			return;
		}
		if (card.length == 0) {
			alert("省份证不能为空！");
			return;
		}
		if (pwd.length == 0) {
			alert("密码不能为空！");
			return;
		} else if (pwd != pwd1) {
			alert("请确认两次输入的密码相同！");
			return;
		} else {
			document.getElementById("form").submit();
		}
	}
</script>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<body>
	<div id="div0" style="margin-left: 90%"></div>
		<a href="./login.jsp" id="a">登陆</a>
		<div align="center" id="div">
			<h1>注册界面</h1>
			<form action="ServerLoginInfo" id="one">
				<table border="0" cellspacing="0" align="center" id="two">
					<tr>
						<th align="right">账号：</th>
						<td><input type="text" id="id" name="id"></td>
						<td style="color: crimson;" id=txt1-1>×请输入正确的账号</td>
						<td style="color: chartreuse;" id=txt1-2>√</td>
					</tr>
					<tr>
						<th align="right">密码：</th>
						<td><input type="password" id="pwd" name="pwd"></td>
						<td style="color: crimson;" id=txt2-1>×请输入正确的密码</td>
						<td style="color: chartreuse;" id=txt2-2>√</td>
					</tr>
					<tr>
						<th align="right">确认密码：</th>
						<td><input type="password" id="pwd1" name="card"></td>
						<td style="color: crimson;" id=txt3-1>×请确认两次密码相同</td>
						<td style="color: chartreuse;" id=txt3-2>√</td>
					</tr>
					<tr>
						<th align="right">邮箱：</th>
						<td><input type="text" id="email" name="email"></td>
						<td style="color: crimson;" id=txt4-1>×请输入正确的邮箱</td>
						<td style="color: chartreuse;" id=txt4-2>√</td>
					</tr>
				</table>
				<input type="submit" id="but1" value="注册" onclick="Test()">
				<input type="reset" id="but2" value="重置" onclick="clear()"><br>
			</form>
		</div>
		<script>
			$(function() {
				$("#txt1-1").hide();
			})
			$(function() {
				$("#txt1-2").hide();
			})
			$("#id").blur(function() {
				var id = document.getElementById("id").value;
				if(id.length == 0 || id.length > 10) {
					$(function() {
						$("#txt1-1").show();
					})
				} else {
					$(function() {
						$("#txt1-2").show();
					})
				}
			})
			$("#id").focus(function() {
				$(function() {
					$("#txt1-1").hide();
				})
				$(function() {
					$("#txt1-2").hide();
				})
			})
		</script>
		
		<script>
			$(function() {
				$("#txt2-1").hide();
			})
			$(function() {
				$("#txt2-2").hide();
			})
			$("#pwd").blur(function() {
				var pwd = document.getElementById("pwd").value;
				if(pwd.length == 0 || pwd.length > 10) {
					$(function() {
						$("#txt2-1").show();
					})
				} else {
					$(function() {
						$("#txt2-2").show();
					})
				}
			})
			$("#pwd").focus(function() {
				$(function() {
					$("#txt2-1").hide();
				})
				$(function() {
					$("#txt2-2").hide();
				})
			})
			$(function() {
				$("#txt3-1").hide();
			})
			$(function() {
				$("#txt3-2").hide();
			})
			$("#pwd1").blur(function() {
				var pwd = document.getElementById("pwd").value;
				var pwd1 = document.getElementById("pwd1").value;
				if(pwd != pwd1||pwd1==0) {
					$(function() {
						$("#txt3-1").show();
					})
				} else {
					$(function() {
						$("#txt3-2").show();
					})
				}
			})
			$("#pwd1").focus(function() {
				$(function() {
					$("#txt3-1").hide();
				})
				$(function() {
					$("#txt3-2").hide();
				})
			})
		</script>
		<script>
			$(function() {
				$("#txt4-1").hide();
			})
			$(function() {
				$("#txt4-2").hide();
			})
			$("#email").blur(function() {
				var email = document.getElementById("email").value;
				if(email.length == 0 || email.length > 10) {
					$(function() {
						$("#txt4-1").show();
					})
				} else {
					$(function() {
						$("#txt4-2").show();
					})
				}
			})
			$("#email").focus(function() {
				$(function() {
					$("#txt4-1").hide();
				})
				$(function() {
					$("#txt4-2").hide();
				})
			})
		</script>
</body>
</html>
